import React, { Component } from 'react'
import {connect} from 'react-redux';
import {nanoid} from 'nanoid';
import {addUser} from '../store/action/user';

 class user extends Component {
   addUser = ()=>{
     const name = this.name.value;
     const age = this.age.value;
     const user = {id:nanoid(),name,age}
    this.props.addUser(user)
    this.name.value = ""
    this.age.value = ""
   }
  render() {
    return (
      <div>
        <h2>这是User组件:上方组件总数为：{this.props.count.num}</h2>
        姓名：
        <input type="text" ref={(c) => (this.name = c)} />
        <br />
        年龄：
        <input type="text" ref={(c) => (this.age = c)} />
        <br />
        <button onClick={this.addUser}>点击增加</button>
        <ul>
          {this.props.user.map((v, i) => {
            return (
              <li key={v.id}>
                {v.name}--{v.age}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default connect(
  state=>({
    user:state.user,
    count:state.count
  }),
  {
    addUser
  }
)(user)
